<template>
	<div class="nav-detail">
		<van-tabs swipeable>
			<van-tab  v-for="(i,index) in screen_title" :key="index">
			<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
			<ul class="shop-list layout flex-w w92 auto mb25">
				<router-link tag="li" to="/detail" class="w48 mt15" v-for="(item,index) in data.list" :key="index">
					<img class="responsive-img img-bg" style="height: 10rem" :src="item.img" alt="">
					<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
					<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
					<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
					<div class="layout">
						<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
						<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
					</div>
				</router-link>
			</ul>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import Swiper from '@/components/Swiper';
	import { Tab, Tabs,Progress } from 'vant';
	export default{
		components: {
			Swiper,
			Tab,
			Tabs,
			Progress
		},
		data()
		{
			return{
				data            : [],
				banner_data 	: [],
				screen_title    : [{name:'综合排序',sort:0},{name:'即将结束',sort:3},{name:'金额最多',sort:1},{name:'人数最多',sort:4}],
				brand_id        : this.$route.query.brand_id,
				sort            : 0
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				let params = {
					brand_id 	: this.brand_id,
					category_id : this.$route.query.id,
					sort   		: this.sort,
					// page 		: this.page++,
					// limit 		: 10,
				}
				this.$http.get('/brand/goods',{ params : params }).then(res => {
					this.data = res.data;
				})
			},
			loadInitScreenData(item)
			{
				this.sort = item.sort;
				this.data = [];
				this.loadData();
			}
		}
	}
</script>

<style lang="less">
	.nav-detail{

	}
</style>












































